<template>
  <div class="course-detail">
    <div class="course-header">
      <el-page-header @back="goBack">
        <template #content>课程详情</template>
      </el-page-header>
    </div>

    <div class="course-content" v-loading="loading">
      <template v-if="courseData">
        <div class="course-info">
          <div class="course-cover">
            <el-image :src="courseData.image" fit="cover" />
          </div>
          <div class="course-meta">
            <h1>{{ courseData.title }}</h1>
            <div class="course-stats">
              <span>学生数：{{ courseData.studentCount }}</span>
              <span>价格：¥{{ courseData.price }}</span>
              <el-tag :type="courseData.status === 1 ? 'success' : 'info'">
                {{ courseData.status === 1 ? '已上线' : '未上线' }}
              </el-tag>
            </div>
            <div class="course-actions">
              <el-button 
                type="primary" 
                :loading="favoriteLoading"
                @click="handleFavorite"
              >
                {{ courseData.hasFavorited ? '取消收藏' : '收藏课程' }}
              </el-button>
              <el-button 
                type="success" 
                :loading="enrollLoading"
                @click="handleEnroll"
              >
                {{ courseData.hasEnrolled ? '已报名' : '报名课程' }}
              </el-button>
            </div>
          </div>
        </div>

        <div class="course-description">
          <h2>课程介绍</h2>
          <p>{{ courseData.description }}</p>
        </div>

        <div class="course-chapters">
          <h2>课程章节</h2>
          <el-collapse v-if="courseData.chapters && courseData.chapters.length">
            <el-collapse-item 
              v-for="chapter in courseData.chapters" 
              :key="chapter.id"
              :title="chapter.title"
            >
              <div class="chapter-content">
                <div v-html="chapter.content"></div>
                <div class="chapter-status" v-if="courseData.hasEnrolled">
                  <el-tag :type="chapter.isCompleted ? 'success' : 'info'" size="small">
                    {{ chapter.isCompleted ? '已完成' : '未完成' }}
                  </el-tag>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
          <el-empty v-else description="暂无章节" />
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getCourseById } from '@/api/course'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const favoriteLoading = ref(false)
const enrollLoading = ref(false)
const courseData = ref(null)

const goBack = () => {
  router.back()
}

const getCourseDetail = async () => {
  try {
    loading.value = true
    const res = await getCourseById(route.params.id)
    courseData.value = res
  } catch (error) {
    console.error(error)
    ElMessage.error('获取课程详情失败')
  } finally {
    loading.value = false
  }
}

const handleFavorite = async () => {
  try {
    favoriteLoading.value = true
    await favoriteCourse({ id: courseData.value.id })
    courseData.value.hasFavorited = !courseData.value.hasFavorited
    ElMessage.success(courseData.value.hasFavorited ? '收藏成功' : '取消收藏成功')
  } catch (error) {
    console.error(error)
  } finally {
    favoriteLoading.value = false
  }
}

const handleEnroll = async () => {
  if (courseData.value.hasEnrolled) {
    ElMessage.info('您已报名该课程')
    return
  }

  try {
    enrollLoading.value = true
    await addCourse({ id: courseData.value.id })
    courseData.value.hasEnrolled = true
    ElMessage.success('报名成功')
  } catch (error) {
    console.error(error)
  } finally {
    enrollLoading.value = false
  }
}

onMounted(() => {
  getCourseDetail()
})
</script>

<style scoped>
.course-detail {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.course-header {
  margin-bottom: 20px;
}

.course-content {
  min-height: 200px;
}

.course-info {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.course-cover {
  width: 300px;
  height: 200px;
  overflow: hidden;
  border-radius: 4px;
}

.course-cover :deep(.el-image) {
  width: 100%;
  height: 100%;
}

.course-meta {
  flex: 1;
}

.course-meta h1 {
  margin: 0 0 20px;
  font-size: 24px;
}

.course-stats {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 20px;
  color: #666;
}

.course-actions {
  display: flex;
  gap: 10px;
}

.course-description {
  margin-bottom: 30px;
}

.course-description h2 {
  font-size: 18px;
  margin-bottom: 15px;
}

.course-chapters h2 {
  font-size: 18px;
  margin-bottom: 15px;
}

.chapter-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.chapter-status {
  margin-left: 20px;
}
</style> 